(function(){
    var box = document.getElementById('box');
var curLeft = ((document.body.clientWidth||document.documentElement.clientWidth) - box.offsetWidth)/2;
var curTop = ((document.body.clientHeight || document.documentElement.clientHeight) - box.offsetHeight)/2;
box.style.left = curLeft + 'px';
box.style.top = curTop + 'px';

box.onmousedown = function(e){
    e = e || window.event;
    var preLeft = parseFloat(window.getComputedStyle(this,null).left);
    var preTop = parseFloat(window.getComputedStyle(this,null).top);
    console.log(preLeft,preTop,e.target);
    var event = e;
    var _this = this;
    document.onmousemove = function(e){
         e = e || window.event;
         //向左移动多少
         console.log(event.clientX,e.clientX);
        var curLeft = e.clientX - (event.clientX - preLeft);
        var curTop = e.clientY - (event.clientY - preTop);
        _this.style.left = curLeft + 'px';
        _this.style.top = curTop + 'px';
    }

    this.onmouseup = function(e){
        e = e || window.event;
        document.onmousemove = null;
        
    }
}
})();